Noratetsu Lab

　個人サイトを新しく作り直しました。

• Noratetsu House

　前のバージョンは普通にHTML＋JavaScript＋CSSで作っていましたが、新バージョンはDenoのFreshで構築しています。Freshはpreactを使って書くWebフレームワークで、多分Next.jsと近いものです（Next.jsに触ったことはありませんがおそらく）。前バージョンほど表示は爆速ではなくなってしまいましたが、管理はずっと簡単になりました。

　サイトのお引っ越しに伴い各投稿場所の運用の変更がいくつかあります。

• Blogger（Noratetsu Lab）の更新を終了します。
• のらてつの雑記帳 - zawazawaの活用は終了しました。
• ScrapboxのNoratetsu Lab Dict.プロジェクトの再公開はしないことにしました。

　Bloggerというサービスは気に入っているのですが、なんであれブログサービスを利用するとどうしても「投稿しに行く」という形式になるため、記事の管理はかなり面倒です。後から加筆修正するのが億劫だったので、自前のデータを反映させて簡単に更新できる形態を採用することにしました。

　以下はサイトについての語りです。

Labモード

　Bloggerを更新終了する代わりに、Bloggerに作ったデザインとほぼ同じデザインでコンテンツを見ることができるLabモードを用意しました。トップページ及び各記事の「Labモードへ」のリンクから移動することができます。このデザインは元々Bloggerにあったものではなく、自分でCSSを書いて原型を留めないレベルにアクロバティックに変更して作ったものなので、自分のサイトに移しても問題ないだろうと。
　機能の追加もしてあります。例えばバックリンクです。ブログサービスの多くで難点になるのは、リンクを貼っても貼られた側にそのことが反映されないことです。その場合、貼られた側にリンクを反映させるには手動でリンクを貼りに行く必要があります。非常に面倒で、大変に阿呆らしい作業です。なので自動で取得して反映するようにしました。

BBS風雑記帳

　以前ひとり掲示板で自由に呟くで書きましたが、zawazawaというサービスに自分だけが投稿する掲示板を作っていました。最近は専らPodcastの感想を書くのに利用していました。ひとりで掲示板を使うメリットは色々ありますが、SNSと同様にタイトルなしに発信できること、そして「過去レス」「過去ログ」を参照できることが特に大きな利点です。
　zawazawaに不満は全然ないのですが、どうせならこれも自前で賄おうと思い、それっぽいものを作ってみました。トップページの「BBS風雑記帳」のリンクから閲覧できます。自前だと投稿データの最新版を自分の手元に置けるというのも安心感があります。
　今現在はzawazawaに投稿していたものを引っ越したくらいでそんなに充実感はありませんが、スレッドを作るのは超簡単にしてあるので、まあ何か思いついたら気楽に書いていきたいと思います。

NTA-DIYレポート

　去年、Noratetsu Labにて「ノートテイキングアプリDIY体験記」と称してシリーズ記事を書いていましたが、途中でやめて書き方を模索していました。ひとつの案として、フォーマットを決めたレポート形式にすることを思いついたので実験的に掲載してみることにしました。
　そもそも文章の形で書く必要もないことを無理やり文章化しようとしていたのが問題の根にあるので、箇条書きでぽんぽんぽんと書く形にしています。そして各月のレポートを横方向に並べることで流れが見えるようにしました。
　場は整えましたがまだ中身がぺらぺらなので、気が向いた時に進めていこうと思っています。

データの構築方法

　コンテンツのデータは相変わらずDynalistに書いて作っています。Dynalist APIを使ってコマンド一発で記事データがビシッと作られるわけです。BBS風雑記帳もNTA-DIYレポートもそれぞれドキュメントを作って書いています。
　最近ひとつやり方を変えたのが、用語集部分のデータの作り方です。前まではこれもDynalistに書いていましたが、先日からScrapboxに変更しました（Noratetsu Lab Dict.として公開していたものです）。元々Scrapboxに書いていたのを、サイト用データを構築できるようにするためにDynalistに引っ越していたのですが、やはり用語的なものをアウトライナーで管理するのは非常に違和感があって更新が捗らなかったので、そういう用途に最も向いているScrapboxに戻すことにしました。
　Scrapboxのデータは外部からAPIで取得することはできないので、更新したらjsonをエクスポートし、それをスクリプトでサイト用のデータに変換しています。若干面倒ですが、Dynalistでやろうとするよりかは遥かに編集の流れが自然です。
　このScrapboxプロジェクトについては、先日「しばらく非公開にします」と書きましたが（Noratetsu Lab Dict.の改修作業をします）、サイト内で同じ内容を公開するわけなので、Scrapboxプロジェクトの方は公開しておく必要はないなと思い再公開はしないことにしました。

予定

　Freshを使うようにしたことでコンテンツの追加が極めて簡単になったので、自作ツールのサンプルやその他思いついたことを増やしていけたら楽しいだろうと思っています。
　

　前から作ろうと思っていた個人サイトができました。

• Noratetsu House

　　
　いやあ頑張った。
　見た目はどシンプルでしょぼい感じがすると思いますがかなり頑張っています。この先に進む前にちょっとでいいので触ってみてください。^[1]

ブログ、用語集、茶の間の統合

　これまで以下の場所にアウトプットしていました。

• 記事：このブログ（Noratetsu Lab）
• 用語集（フレーズや概念などの切り出し）：Noratetsu Lab Dict.
• ちょっとした短文：茶の間（のらてつの茶の間）→のらてつの雑記帳

　ブログを書いていてすごく気になるのが、続きとして書いた記事に前の記事へのリンクを貼っても前の記事からはそれが分からないこと、そして単語やフレーズを対象とした記述（つまり事典風の記述）を書きにくいことです。元々日記に適した形態なので仕方ないことでしょう。
　一応そのやりにくさを補うために、用語集と称した場をScrapboxに作ってちょこちょこ更新していました。Scrapboxの更新は簡単で楽しいのですが、ブログ記事とリンクするには手動で頑張る必要があります。ブログに書いたものを後から概念として名付けたりした時、元のブログ記事にリンクを貼りに行くのはなんだか非常に面倒で、結局いまいち一体感はないままになってしまいました。用語集を作る前と比べたら気分的にものすごくスッキリしてはいるのですが、実用的にはもう一歩というところです。
　そういうわけで、記事と記事あるいは用語集とのリンクを大した手間なく実現できる仕組みを作ろう、と思ってこのサイトができました。

　また、ブログに書くほどじゃないけどSNSに投稿するのもなんか違う、みたいな短めの記述を置く場所として「のらてつの茶の間」と名付けたサイトを以前作りました[^2]。
　本当にめちゃくちゃ頑張って作って、ページ間リンクの仕組みは個人的には会心の出来だったのですが、如何せん更新作業が面倒で、とても「ブログに書くほどじゃない」程度の軽さの記述をほいほい公開できる感じではありませんでした。そもそも、そういう軽い記述と「縦横無尽のネットワーク」みたいな仕組みの相性が良くなくて、自分で作ったものを自分が活かせないという状態に陥ってしまいました。
　その後、反省を踏まえて簡易版を作ってもみたのですが、自作サイトという形態である以上更新作業の面倒臭さの低減には限度があり、手間が「ブログに書くほどじゃない」程度のものを書けるレベルより下回らなかったので、結局いくらもしないうちにやめてしまいました。
　最終的に掲示板サービスをひとりで使うというところに至りました[^3]。これは全然不満はなく面倒でもないのですが、なんとなく書くタイミングを掴めないというか存在を忘れがちというかで、そんなに活発には使っていません。Podcastや記事の感想を書くのには重宝しています。
　で、後述しますが、今回のサイトは投稿内容のメンテナンスが非常に簡単になる仕組みを作ったので、今度こそと思って「茶の間」の欄を設けています。超単純なブログ風のビューになっています。記事更新のタイミングで一緒にまとめて更新できるので、茶の間の記述のためにわざわざ更新作業をするということをしなくてよくなりました。

Dynalistをエディタにする

　訪問者には特に関わりのないことですが、このサイトの肝心なところは、Dynalistをエディタにしていることです。
　記事も用語集も茶の間もAboutも全てDynalist上に書いています。それをサーバーサイドでDynalist APIを使って取得して諸々加工し、データとして取り扱える形にしてからHTMLに読み込んでいます。
　この仕組みは、先月突如としてDynalistに目覚めて（？）活用法を怒涛のように思いついたことにより実現しました。ノート機能、タグ機能、ノードリンク機能をフル活用しています。
　Dynalistでやることの利点は、過去の記述に手を入れることが非常に楽になることです。一般的なブログではおそらく過去記事の編集は面倒極まりないものではないかと思いますが、アウトライナーならとても簡単です。後からリンクを追加したいという時も作業は一瞬で終わります。
　また、Dynalist APIで取得したデータはその後好きなように加工できます。正規表現を駆使してHTMLにしているわけですが、例えばNoratetsu Labの記事へのリンクをこのサイト内のリンクに変換するとか、#で始まるタグを用語集へのリンクとして解釈するとか、さまざまなことをやっています。つまり、Dynalist内ではDynalist上で扱うものとして自然な書き方で書いて、それをサイト仕様にコンバートすれば、投稿先の仕様に合わせて無理をする必要がなくなるのです。
　具体的にはDeno^[2]のスクリプトで取得・加工してjsonファイルを作っておき、　GitHubの専用リポジトリにプッシュして、それをサイトのロード時に読み込む流れです。データの加工（サーバーサイド）とサイトでの実行（クライアントサイド）は完全に切り離されているので、加工にはどれだけ時間がかかっても構いません。やろうと思えばいくらでも複雑な処理ができます。

Drummerを思い出した

　Dave Winer氏が開発したアウトライナーに、Drummerというものがあります。UIが独特過ぎて本人以外がこれに慣れるのはちょっと容易でないでしょうが、搭載している機能は非常に画期的だと思います。最大の特徴は、直接ブログとして公開できることと、JavaScriptを拡張したスクリプトを使えることです。
　Drummerを知った当初は「スクリプトを使える」と言われても何をすればいいのかよくわからなかったのですが、その後二年弱が経った今、結局私はDynalistに対してブックマークレットやらChrome拡張機能やらDenoやらでスクリプトを使いまくって自分専用の機能を拡張しています。やっと意味がわかった、という心境です。
　そしてDrummerと同様に、Dynalistに書いた内容をそのままブログやサイトのコンテンツとして公開するに至りました。この形式を思いついてコードを大方書いてから、ふとDrummerのことを思い出して、そういえばあれはつまりこういうことだったのではと思いました。
　Drummerはずっと「わかりたいけどわからない」ものだったので、自分にとって良い形を追い求めた先に答えが待っていたことには感慨深いものがあります。

今後の予定

　さて、作って公開に至ったことで若干燃え尽き気味な感がありますが、やらなきゃいけないこと、やりたいことは色々あります。
　まず過去記事の引っ越し（というかDynalistへの追加）です。どう頑張っても全自動にはならないので、それなりの手間をかけて作業する必要があります。時間がかかるのを覚悟してちまちまやっていきます。
　あとはスタイルの改良です。最低限は整えましたが、細かい部分の調整や、複数のビューモードの用意を考えています。
　このサイトを自分の拠点として自分的に面白いことができたらいいなと思っています。

---

1. 表示されない、挙動がおかしい、という場合はTwitter（X）（@Foam_Crab）かBluesky（@noratetsu.bsky.social）かお問い合わせからご連絡ください。ブラウザ毎に異なる仕様に対応できていないということなので、使用しているブラウザを教えていただければ対処できるかもしれません。
   のらてつの茶の間とは
   ひとり掲示板で自由に呟く ↩︎

2. 私はDenoを大変気に入っているのでDenoを使っていますが、もちろんその前身のNode.jsでも、あるいはPythonでもいいはずです。他のサーバーサイド言語のことはわかりませんが、おそらく多様な手段があるでしょう。 ↩︎